<script setup lang="ts">
import { ref } from 'vue'
import Editor from "@/components/RichTextEditor/index.vue";

const list = ref([{
  title: '开始',
  id: 1,
  children: [{
    title: '简介',
    id: 2,
    pid: 1,
    content: ''
  }, {
    title: '快速上手',
    id: 3,
    pid: 1,
    content: ''
  }]
}, {
  title: '基础',
  id: 4,
  children: [{
    title: '基础组件',
    id: 5,
    pid: 4,
    content: ''
  }, {
    title: '布局',
    id: 6,
    pid: 4,
    content: ''
  }]
}, {
  title: '表单',
  id: 7,
  children: [{
    title: '表单组件',
    id: 8,
    pid: 7,
    content: ''
  }]
}])
const addDialogVisible = ref(false)
const addForm = ref({
  title: '',
  pid: 1
})
const eidtDialogVisible = ref(true)
const editForm = ref({
  title: '',
  content: ''
})
</script>
<template>
  <div style="padding: 16px;">
    <el-card>
      <template #header>
        <el-button type="primary">新增</el-button>
      </template>
      <el-table :data="list" row-key="id" border>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column width="300" label="操作" align="center">
          <template #default="{row}">
            <el-button type="primary">新增</el-button>
            <el-button type="primary">编辑</el-button>
            <el-button type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="addDialogVisible" title="新增">
      <el-form>
        <el-form-item label="标题">
          <el-input placeholder="请输入标题" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button>取消</el-button>
        <el-button type="primary">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="eidtDialogVisible" title="编辑">
      <el-form>
        <el-form-item label="标题">
          <el-input placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="内容">
          <div style="border: 1px solid #dcdfe6;border-radius: 4px;overflow: hidden;">
            <editor />
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button>取消</el-button>
        <el-button type="primary">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>